<!-- 继承页面模板 -->
{% extends 'layout/layui_base_page.html' %}

<!-- 加载静态文件 -->
{% load static %}

<!-- Title -->
{% block title %}
    阶段内容详情
{% endblock %}

<!-- CSS --->
{% block css %}
{% endblock %}

<!-- Content -->
{% block content %}

    <!-- 内容01: 顶部基本信息 -->
    <div id="topInfo" style="padding: 20px;">
        <form class="layui-form">
            {% csrf_token %}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" for="line"><b>产线：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="line" id="line" class="layui-input" readonly
                               style="background-color: #eaeaea;font-weight: bold">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="department"><b>部门：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="department" id="department" class="layui-input" readonly
                               style="background-color: #eaeaea;font-weight: bold">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" for="position"><b>职位：</b></label>
                    <div class="layui-input-inline">
                        <input type="text" name="position" id="position" class="layui-input" readonly
                               style="background-color: #eaeaea;font-weight: bold">
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-weight: bold"><span id="phaseNameTitle"></span>内容详情</legend>
            </fieldset>

            <div class="layui-collapse" lay-filter="test">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" style="color:navy; font-size: 16px; font-weight: bold">基本信息</h2>
                    <div class="layui-colla-content layui-show">
                        <form class="layui-form">
                            {% csrf_token %}
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="eid"><b>员工编号：</b></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="eid" id="eid" class="layui-input" readonly
                                               style="background-color: #eaeaea;font-weight: bold">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="name"><b>员工姓名：</b></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" id="name" class="layui-input"
                                               readonly style="background-color: #eaeaea;font-weight: bold">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="total_training"><b>培训时长：</b></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="total_training" id="total_training" class="layui-input"
                                               readonly
                                               style="background-color: #eaeaea;font-weight: bold">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="total_working"><b>总工时：</b></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="total_working" id="total_working" class="layui-input"
                                               readonly
                                               style="background-color: #eaeaea;font-weight: bold">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="total_task"><b>任务总数：</b></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="total_task" id="total_task" class="layui-input"
                                               readonly
                                               style="background-color: #eaeaea;font-weight: bold">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="completed_task"><b>完成总数：</b></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="completed_task" id="completed_task" class="layui-input"
                                               readonly style="background-color: #eaeaea;font-weight: bold">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="pass_task"><b>Pass数：</b></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="pass_task" id="pass_task" class="layui-input" readonly
                                               style="background-color: #eaeaea;font-weight: bold">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" for="fail_task"><b>Fail数：</b></label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="fail_task" id="fail_task" class="layui-input" readonly
                                               style="background-color: #eaeaea;font-weight: bold">
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" style="color:navy; font-size: 16px; font-weight: bold">可视化展示</h2>
                    <div class="layui-colla-content">
                        <div class="layui-row">
                            <div class="layui-col-lg6">
                                <div id="left_charts" style="height: 400px;width:700px ;margin-top: 20px;"></div>

                            </div>
                            <div class="layui-col-lg6">
                                <div id="right_charts" style="height: 400px;width:700px ;margin-top: 20px;"></div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" style="color:navy; font-size: 16px; font-weight: bold">内容详情</h2>
                    <div class="layui-colla-content" id="phaseRecordDetail" style="padding-left: 50px;">

                    </div>
                </div>

            </div>
        </form>
    </div>

{% endblock %}

<!-- JS -->
{% block js %}
    <script src="{% static 'js/xm-select.js' %}"></script>
    <script src="{% static 'js/echarts.js' %}"></script>
    <script>
        // 入口函数
        $(function () {
            // === 页面初始化 ===
            initPage();

        });

        // ================ 页面初始化的实现 ==================
        function initPage() {
            layui.use(['element'], function () {
                let element = layui.element;
            });

            // 接收数据
            let baiscData = parent.DATA;
            let phaseName = parent.PHASE_NAME;

            console.log(baiscData);

            // ===  初始化 产线、部门、职位信息 ===
            $('#line').val(baiscData.position__department__line__name);
            $('#department').val(baiscData.position__department__name);
            $('#position').val(baiscData.position__name);
            $('#phaseNameTitle').html(phaseName);

            // === 员工编号和姓名
            $('#eid').val(baiscData.eid);
            $('#name').val(baiscData.name);

            // === 初始化基础数据 ====
            initBasicData(baiscData.eid, baiscData.position_id, phaseName);

            // === 获取可视化数据 ===
            initeCharts(baiscData.eid, baiscData.position_id, phaseName);

            // === 获取当前用户完成单前阶段的详情
            initPhaseContentDetail(baiscData.eid, baiscData.position_id, phaseName);
        }

        // ================ 初始化基础数据 =====================
        function initBasicData(eid, position_id, phaseName) {
            // Ajax请求
            $.ajax({
                url: "{% url 'trainee_phase_basic_detail' %}"
                , method: 'post'
                , data: {
                    eid: eid,
                    position_id: position_id,
                    phase_name: phaseName,
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                }
                , success: function (res) {
                    if (res.status) {
                        $('#total_training').val(res.data.total_training);
                        $('#total_working').val(res.data.total_working);
                        $('#total_task').val(res.data.total_task);
                        $('#completed_task').val(res.data.completed_task);
                        $('#pass_task').val(res.data.pass_task);
                        $('#fail_task').val(res.data.fail_task);
                    }

                }
            })
        }


        // =============== 初始化eCharts展示 ===================
        function initeCharts(eid, position_id, phaseName) {
            // Ajax请求
            $.ajax({
                url: "{% url 'trainee_echarts_data' %}"
                , method: 'post'
                , data: {
                    eid: eid,
                    position_id: position_id,
                    phase_name: phaseName,
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                }
                , success: function (res) {
                    initTrainingTimeEcharts(res.training);
                    initWorkingTimeEcharts(res.working);
                }
            });
        }


        // =====================初始化培训时长的可视化展示 ======================
        function initTrainingTimeEcharts(data) {


            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('left_charts'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '当前阶段培训时长可视化展示',
                    subtext: '单位(时)',
                    left: 'center',
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['当前用户培训时长', '最长时长', '最短时长', '平均时长']
                },
                yAxis: {},
                series: [
                    {
                        name: '所需时间',
                        type: 'bar',
                        data: data,
                        itemStyle:{
                            normal:{
                                label:{
                                    show:true,
                                    position:'top',
                                    textStyle:{
                                        color:'navy',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }


        // =====================初始化培训时长的可视化展示 ======================
        function initWorkingTimeEcharts(data) {


            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('right_charts'));

            // 指定图表的配置项和数据
            var option = {
                color: ["#C23531"],
                title: {
                    text: '当前阶段耗费工时可视化展示',
                    subtext: '单位(时)',
                    left: 'center',

                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['当前用户工时', '最大工时', '最小工时', '平均工时']
                },
                yAxis: {},
                series: [
                    {
                        name: '所需时间',
                        type: 'bar',
                        data: data,
                         itemStyle:{
                            normal:{
                                label:{
                                    show:true,
                                    position:'top',
                                    textStyle:{
                                        color:'navy',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        // ==================== 获取当前用户完成当前阶段的详情 =========
        function initPhaseContentDetail(eid, position_id, phaseName) {
            // Ajax
             $.ajax({
                url: "{% url 'trainee_phase_record_detail' %}"
                , method: 'post'
                , data: {
                    eid: eid,
                    position_id: position_id,
                    phase_name: phaseName,
                    csrfmiddlewaretoken: "{{ csrf_token }}"
                }
                , success: function (res) {
                    buildPhaseDetail(res.data);
                }
            });

        }
        
        // =================== 构建时间线的前台展示 ===========================
        function buildPhaseDetail(data) {
            // 获取当前的容器
            let parent = $('#phaseRecordDetail');
            // 清空 <i class="layui-icon layui-timeline-axis"></i>
            parent.empty();
            // 新建ul
            let ULContainer = $('<ul>').attr('class', 'layui-timeline').appendTo(parent);
            // 开始循环
            $.each(data, (index, value)=>{
                // 新建li标签
                let LIContainer = $('<li>').attr('class','layui-timeline-item').appendTo(ULContainer);
                // 新建i标签
                $('<i>').attr('class','layui-icon layui-timeline-axis').html("").appendTo(LIContainer);
                // 新建div
                let DivContainer = $('<div>').attr('class', 'layui-timeline-content layui-text').appendTo(LIContainer);
                // 新建H3
                $('<h3>').attr('class', 'layui-timeline-title').html(value.record_time + " --- " + value.phasecontent__name).appendTo(DivContainer);

                // 新建p
                $('<p>').html(
                    "<b>培训时长：</b>" + value.training_time + "&nbsp&nbsp&nbsp&nbsp&nbsp<b>工时：</b>" + value.working_time + "&nbsp&nbsp&nbsp&nbsp&nbsp<b>状态：</b>" + value.status__name + "<br>" +
                        "<b>标注：</b><br>" + value.remark

                ).appendTo(DivContainer)


            })

        }
    </script>

{% endblock %}

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>